<template>
  <div v-show="dialogValue" class="add-page f-c">
    <BackPage title="国有资产不动产新增、编辑" show-back @back="onPageBack" />
    <div class="add-form-box f-g">
      <el-form ref="formRef" :model="ruleForm" :rules="rules" label-position="top" class="user-add-form " inline>
        <el-form-item label="单位" prop="unitName" style="margin-right: 64px">
          <el-input clearable v-model="ruleForm.unitName" />
        </el-form-item>
        <el-form-item label="登记单位名称" prop="regUnit">
          <el-input clearable v-model="ruleForm.regUnit" />
        </el-form-item>
        <el-form-item label="房屋坐落地址" prop="hoseLocaltion" style="margin-right: 64px">
          <el-input clearable v-model="ruleForm.hoseLocaltion" />
        </el-form-item>
        <el-form-item label="目前使用单位" prop="useUnit">
          <el-input clearable v-model="ruleForm.useUnit" />
        </el-form-item>
        <el-form-item label="建筑面积（㎡）" prop="buildArea" style="margin-right: 64px">
          <el-input clearable v-model="ruleForm.buildArea" type="number" />
        </el-form-item>
        <el-form-item label="土地面积（㎡）" prop="landArea">
          <el-input clearable v-model="ruleForm.landArea" type="number" />
        </el-form-item>
        <el-form-item label="补办类型" style="width: 100%" prop="handlingType">
          <el-select clearable v-model="ruleForm.handlingType">
            <el-option v-for="item in handlingTypeList" :key="item.id" :value="item.name" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="节点" style="width: 100%" prop="nodePoint">
          <el-select clearable v-model="ruleForm.nodePoint">
            <el-option v-for="item in nodeList" :key="item.id" :value="item.actualValue" :label="item.actualValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目类别" style="width: 100%" prop="projectCategory">
          <el-select clearable v-model="ruleForm.projectCategory">
            <el-option v-for="item in categoryList" :key="item.id" :value="item.actualValue" :label="item.actualValue" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSave">保存</el-button>
          <el-button @click="onPageBack">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { http_assets } from '@/api'

export default {
  name: 'User1Add',
  props: {
    nodeList: {
      type: Array
    },
    categoryList: {
      type: Array
    }
  },
  data() {
    return {
      dialogValue: false,
      ruleForm: {
        id: undefined,
        unitName: '',
        regUnit: '',
        hoseLocaltion: '',
        useUnit: '',
        buildArea: '',
        landArea: '',
        handlingType: '',
        nodePoint: '',
        projectCategory: ''
      },
      rules: {},
      handlingTypeList: [
        { id: '两证齐全', name: '两证齐全'},
        { id: '单一土地证', name: '单一土地证'},
        { id: '单一房产证', name: '单一房产证'},
        { id: '两证全无', name: '两证全无'},
      ]
    }
  },
  methods: {
    async open(item) {
      if (item) {
        for (const key in this.ruleForm) {
          this.ruleForm[key] = item[key]
        }
      } else {
        this.ruleForm = {
          id: undefined,
          unitName: '',
          regUnit: '',
          hoseLocaltion: '',
          useUnit: '',
          buildArea: '',
          landArea: '',
          handlingType: '',
          nodePoint: '',
          projectCategory: ''
        }
      }
      this.dialogValue = true
    },
    onPageBack() {
      this.$emit('get-page')
      this.dialogValue = false
    },
    onSave() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          const formData = {
            ...this.ruleForm
          }
          http_assets[this.ruleForm.id ? 'update' : 'create']({
            ...formData
          }).then(res => {
            this.$message.success(res.msg)
            this.onPageBack()
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.add-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #F6F6F6;
}
.add-form-box {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(185, 185, 185, .3);
  border-radius: 16px;
  padding: 60px;
  ::v-deep .el-form {
    .el-form-item {
      width: calc((100% - 64px) / 2);
      margin-right: 0;
    }
    .el-select {
      width: 100%;
    }
  }
}
</style>
